<script setup lang="ts">
import TimePanel from "@renderer/components/time/index.vue";
import Timer from "@renderer/components/timer/index.vue";
import BoxMenu from "@renderer/components/box-menu/index.vue";
import { reactive } from "vue";
import { useAppStore } from "@renderer/store/modules/app";
import { useTimeStore } from "@renderer/store/modules/time";
import { TimerMode, TimerStatusMode } from "@renderer/types/GlobalEnum";

const appStore = useAppStore();
const timeStore = useTimeStore();

const state = reactive({
    boxMenuShow: false,
});
</script>

<template>
    <main id="time-main">
        <section>
            <time-panel
                v-if="appStore.mode === TimerMode.nomal"
                :fontSize="appStore.fontSize"
                :color="appStore.color"
                :format="appStore.isShowSeconds ? 'HH:MM:SS' : 'HH:MM'"
                :isTwentyFour="appStore.isTwentyFour"
            ></time-panel>
            <timer
                v-else
                :isFlicker="timeStore.status === TimerStatusMode.timeout"
                :fontSize="appStore.fontSize"
                :color="appStore.color"
                @click="state.boxMenuShow = !state.boxMenuShow"
                :count="timeStore.timing"
            >
            </timer>
        </section>
        <section>
            <box-menu
                v-show="appStore.mode !== TimerMode.nomal && state.boxMenuShow"
            ></box-menu>
        </section>
    </main>
</template>
